<%--
  ~ Copyright (c) 2016. 恒昌互联网运营中心.
  --%>

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" cotent="">
    <meta name="author" content="">
    <title>鹰眼监控平台-${title}</title>
    <%@ include file="/WEB-INF/views/common/include.jsp" %>
    <style type="text/css">
        .runtimeBar{
            display:inline-block;
            height:8px;
        }
    </style>

    <script type="text/javascript">
        var timer;
        $(document).ready(function () {
            //getRedisEnvList();
            //timer=setInterval("getData()", 5000);
            //$("#trace_tree_table").treetable({expandable: true});
            $('.form_date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            changePlatform();
        });

        function changePlatform() {
            $.ajax({
                url : "getEnums",
                data : {
                    "platform":$("#sel_platformName").val(),
                    "env":$("#sel_env").val()
                },
                success : function(result) {
                    if (result.code == "1") {
                        var enumVo = result.data;
                        $("#ul_clientNameList").empty();
                        for(var i=0;i<enumVo.clientNameList.length;i++) {
                            var v=enumVo.clientNameList[i];
                            $("#ul_clientNameList").append("<li><a href=\"#\" onclick=\"$('#txt_clientName').val('"+v+"');\">"+v+"</a></li>");
                        }
                        $("#ul_serviceNameList").empty();
                        for(var i=0;i<enumVo.serviceNameList.length;i++) {
                            var v=enumVo.serviceNameList[i];
                            $("#ul_serviceNameList").append("<li><a href=\"#\" onclick=\"$('#txt_serviceName').val('"+v+"');\">"+v+"</a></li>");
                        }
                        $("#ul_serviceCategoryList").empty();
                        for(var i=0;i<enumVo.serviceCategoryList.length;i++) {
                            var v=enumVo.serviceCategoryList[i];
                            $("#ul_serviceCategoryList").append("<li><a href=\"#\" onclick=\"$('#txt_serviceCategory').val('"+v+"');\">"+v+"</a></li>");
                        }
                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }

        /**type:1:success,2:info,3:warning,4:danger*/
        function alertInfo(type, msg) {
            if (type == "1") {
                $.scojs_message(msg, $.scojs_message.TYPE_OK);
            } else if (type == "4") {
                $.scojs_message(msg, $.scojs_message.TYPE_ERROR);
            }
        }

        function stat(){
            var statType = $("#sel_statType").val();
            if(statType==="statError"){
                statError();
            }else if(statType==="statPercent"){
                statPercent();
            }else if(statType==="statDependency"){
                statDependency();
            }else if(statType==="statSunburst"){
                statSunburst();
            }
        }

        function statError() {
            $.ajax({
                url : "statError",
                type:"post",
                data : {
                    "platformName":$("#sel_platformName").val(),
                    "env":$("#sel_env").val(),
                    "clientName":$("#txt_clientName").val(),
                    "serviceName":$("#txt_serviceName").val(),
                    "serviceCategory":$("#txt_serviceCategory").val(),
                    "fromDate":$("#fromDate").val(),
                    "toDate":$("#toDate").val()
                },
                success : function(result) {
                    if (result.code === "1") {
                        var xAxis_data=[];
                        var error_data=[];
                        var ok_data=[];
                        var sum_data=[];
                        var error_rate = [];
                        for(var i=0;i<result.data.length;i++){
                            var dateStat=result.data[i];
                            xAxis_data[i]=dateStat.name;
                            var dateSumCount=dateStat.count;
                            sum_data.push(dateSumCount);
                            var subStatMap = dateStat.subStatMap;
                            var subOk=0;
                            var subError=0;
                            if(subStatMap["ERROR"]!=null){
                                subError=subStatMap["ERROR"].count;
                            }

                            if(subStatMap["OK"]!=null){
                                subOk=subStatMap["OK"].count;
                            }

                            ok_data.push(subOk);
                            error_data.push(subError);
                            var rate = ((subError/dateSumCount)*100);
                            if(rate>0){
                                rate = rate.toFixed(3);
                            }
                            error_rate.push(rate);
                        }
                        var option = {
                            title: {
                                text: $("#sel_platformName").val()+'-鹰眼调用统计报表',
                                subtext: '错误率统计'
                            },
                            color: ['#6ea376','#c93436','#c2c21a'],
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {
                                    type : 'cross'
                                },
                                formatter:function (obj) {
                                    var html=obj[0].axisValue+"<br>";
                                    var sumCount = obj[0].value + obj[1].value;
                                    var sumUnit= "次";
                                    if(sumCount>10000){
                                        sumCount=(sumCount/10000).toFixed(3);
                                        sumUnit= "万次";
                                    }
                                    html+="总计调用:" + sumCount+sumUnit+"<br>";

                                    var okCount = obj[0].value;
                                    var okUnit = "次";
                                    if(okCount>10000){
                                        okCount=(okCount/10000).toFixed(3);
                                        okUnit= "万次";
                                    }
                                    var errCount = obj[1].value;
                                    var errUnit = "次";
                                    if(errCount>10000){
                                        errCount=(errCount/10000).toFixed(3);
                                        errUnit = "万次";
                                    }
                                    html+=obj[0].marker+obj[0].seriesName+":"+ okCount+okUnit+"<br>";
                                    html+=obj[1].marker+obj[1].seriesName+":"+errCount+errUnit+"<br>";
                                    html+=obj[2].marker+obj[2].seriesName+":"+obj[2].value+"%";

                                    return html;
                                }
                            },
                            legend: {
                                data:['OK','ERROR']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    data : xAxis_data
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    name: '调用量',
                                    axisLabel: {
                                        formatter: '{value} 次'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '错误率',
                                    axisLabel: {
                                        formatter: '{value} %'
                                    }
                                }
                            ],
                            series : [
                                {
                                    name:'OK',
                                    type:'bar',
                                    barWidth : 30,
                                    stack: 'Result',
                                    data:ok_data
                                },
                                {
                                    name:'ERROR',
                                    type:'bar',
                                    stack: 'Result',
                                    data:error_data,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top'
                                        }
                                    }
                                },
                                {
                                    name:'错误率',
                                    type:'line',
                                    yAxisIndex: 1,
                                    data:error_rate,
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            formatter: "{c}%"
                                        }
                                    }
                                    /*,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }*/
                                }
                            ]
                        };
                        var myChart = echarts.init(document.getElementById('echarts_div'));
                        myChart.clear();
                        myChart.setOption(option);
                    } else {
                        alertInfo("4", result.message);
                    }
                }
            });
        }

        function statPercent() {
            $.ajax({
                url : "statPercent",
                type: "post",
                data : {
                    "platformName":$("#sel_platformName").val(),
                    "env":$("#sel_env").val(),
                    "clientName":$("#txt_clientName").val(),
                    "serviceName":$("#txt_serviceName").val(),
                    "serviceCategory":$("#txt_serviceCategory").val(),
                    "fromDate":$("#fromDate").val(),
                    "toDate":$("#toDate").val()
                },
                success : function(result) {
                    if (result.code === "1") {
                        var xAxis_data=[];
                        var data_95=[];
                        var data_99=[];
                        var data_995=[];
                        for(var i=0;i<result.data.length;i++){
                            var dateStat=result.data[i];
                            xAxis_data[i]=dateStat.name;
                            var subStatMap = dateStat.subStatMap;
                            data_95.push(subStatMap["95"].count);
                            data_99.push(subStatMap["99"].count);
                            data_995.push(subStatMap["99.5"].count);
                        }
                        var option = {
                            title: {
                                text: $("#sel_platformName").val()+'-鹰眼调用统计报表',
                                subtext: '百分位统计'
                            },
                            // color: ['#6ea376','#c93436','#c2c21a'],
                            tooltip : {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                },
                                formatter:function (obj) {
                                    var html=obj[0].axisValue+"<br>";
                                    html+=obj[0].marker+obj[0].seriesName+":"+obj[0].value+"ms"+"<br>";
                                    html+=obj[1].marker+obj[1].seriesName+":"+obj[1].value+"ms"+"<br>";
                                    html+=obj[2].marker+obj[2].seriesName+":"+obj[2].value+"ms";

                                    return html;
                                }
                            },
                            legend: {
                                data: ['95th', '99th', '99.5th']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: xAxis_data
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '请求耗时',
                                    axisLabel: {
                                        formatter: '{value} ms'
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '95th',
                                    type: 'line',
                                    data: data_95,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            formatter: "{c}ms"
                                        }
                                    }
                                },
                                {
                                    name: '99th',
                                    type: 'line',
                                    data: data_99,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            formatter: "{c}ms"
                                        }
                                    }
                                },
                                {
                                    name: '99.5th',
                                    type: 'line',
                                    data: data_995,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            formatter: "{c}ms"
                                        }
                                    }
                                }
                            ]
                        };
                        var myChart = echarts.init(document.getElementById('echarts_div'));
                        myChart.clear();
                        myChart.setOption(option);
                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }

        function statDependency(){
            $.ajax({
                url : "statDependency",
                data : {
                    "platformName":$("#sel_platformName").val(),
                    "env":$("#sel_env").val(),
                    "clientName":$("#txt_clientName").val(),
                    "serviceName":$("#txt_serviceName").val(),
                    "serviceCategory":$("#txt_serviceCategory").val(),
                    "fromDate":$("#fromDate").val(),
                    "toDate":$("#toDate").val()
                },
                success : function(result) {
                    if (result.code == "1") {

                        var data=[];
                        var categories = [];
                        var links = [];
                        var linkIndex=0;
                        for(var i=0;i<result.data.length;i++){
                            var serviceStat=result.data[i];
                            var subStatList=serviceStat.subStatList;
                            var serviceTooltip = "服务名:" + serviceStat.name + ",共计被调用(" + serviceStat.count + "次)<br>客户端调用详情:";
                            if(subStatList!=null&&subStatList.length>0){
                                for(var j=0;j<subStatList.length;j++){
                                    serviceTooltip+="<br>"+subStatList[j].name+"("+subStatList[j].count+"次)";
                                    links[linkIndex++]={
                                        source: subStatList[j].name,
                                        target: serviceStat.name,
                                        value:subStatList[j].count+"次",
                                        label: {
                                            normal: {
                                                show: true,
                                                formatter:subStatList[j].name+"->"+serviceStat.name+"("+subStatList[j].count+"次)"
                                            }
                                        },
                                        lineStyle: {
                                            width: 1,
                                            normal: { curveness: 0.1 }
                                        }
                                    };
                                }
                            }

                            data[i]={
                                name: serviceStat.name,
                                category:i,
                                tooltip:serviceTooltip
                            };
                            categories[i] = {
                                name: serviceStat.name
                            };
                        }


                        var myChart = echarts.init(document.getElementById('echarts_div'));
                        myChart.clear();
                        option = {
                            title: {
                                text: '服务依赖'
                            },
                            legend: [{
                                // selectedMode: 'single',
                                data: categories.map(function (a) {
                                    return a.name;
                                })
                            }],
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            tooltip: {},
                            //animationDurationUpdate: 1500,
                            //animationEasingUpdate: 'quinticInOut',
                            series : [
                                {
                                    categories: categories,
                                    legend: {
                                        show:true
                                    },
                                    type: 'graph',
                                    layout: 'force',
                                    force:{
                                        initLayout:'circular',
                                        repulsion :40,
                                        gravity :0.1,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                                        edgeLength: [30,80]

                                    },
                                    symbolSize: 30,
                                    draggable:false,
                                    roam: true,
                                    label: {
                                        normal: {
                                            show: true
                                        }
                                    },
                                    edgeSymbol: ['circle', 'arrow'],
                                    edgeSymbolSize: [4, 10],
                                    edgeLabel: {
                                        normal: {
                                            textStyle: {
                                                fontSize: 10
                                            }
                                        }
                                    },

                                    data: data,
                                    links:links,
                                    lineStyle: {
                                        normal: {
                                            opacity: 0.9,
                                            width: 2,
                                            curveness: 0
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                    } else {
                        alertInfo("4", result.message);
                    }
                },
                async : false,
                dataType : "json"
            });
        }

        function statSunburst(){
            $.ajax({
                url : "statSunburst",
                data : {
                    "platformName":$("#sel_platformName").val(),
                    "env":$("#sel_env").val(),
                    "clientName":$("#txt_clientName").val(),
                    "serviceName":$("#txt_serviceName").val(),
                    "serviceCategory":$("#txt_serviceCategory").val(),
                    "fromDate":$("#fromDate").val(),
                    "toDate":$("#toDate").val()
                },
                success : function(result) {
                    if (result.code == "1") {
                        var data=result.data;
                        var option = {
                            backgroundColor: '#2c343c',
                            color:["#333"],
                            title: {
                                text: $("#sel_platformName").val()===""?"全平台-鹰眼调用统计报表":($("#sel_platformName").val()+'-鹰眼调用统计报表'),
                                subtext: '旭日图统计',
                                textStyle: {
                                    fontSize: 14,
                                    align: 'center',
                                    color:"#fff"
                                },
                                subtextStyle: {
                                    align: 'center'
                                }
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            tooltip : {
                                show:true,
                                trigger: 'item',
                                formatter:function (obj) {
                                    var okCount=obj.data.okCount;
                                    var errorCount=obj.data.errorCount;
                                    var errorRate=0;
                                    if(okCount>0&&errorCount>0){
                                        errorRate=(errorCount/okCount*100).toFixed(4);
                                    }
                                    var html=obj.data.name+"<br>";
                                    html+="成功:"+okCount+"次<br>";
                                    html+="失败:"+errorCount+"次<br>";
                                    html+="错误率:"+errorRate+"%<br>";
                                    return html;
                                }
                            },
                            series: {
                                type: 'sunburst',
                                highlightPolicy: 'descendant',
                                data: data,
                                radius: [0, '30%'],
                                sort: null,
                                levels: [{}, {
                                    r0: '5%',
                                    r: '30%',
                                    itemStyle: {
                                        borderWidth: 1
                                    },
                                    label: {
                                        fontSize:14,
                                        rotate: 'tangential'
                                    }
                                }, {
                                    r0: '30%',
                                    r: '65%',
                                    itemStyle: {
                                        borderWidth: 1
                                    },
                                    label: {
                                        fontSize:16,
                                        rotate: 'radial'
                                        //align: 'right'
                                    }
                                }, {
                                    r0: '65%',
                                    r: '80%',
                                    itemStyle: {
                                        borderWidth: 1
                                    },
                                    label: {
                                        position: 'outside',
                                        rotate: 'radial',
                                        distance: 15,
                                        fontSize:14,
                                        //fontFamily:"Microsoft YaHei",
                                        textBorderColor:'transparent',
                                        textShadowBlur:0
                                    },
                                    itemStyle: {
                                        borderWidth: 3
                                    }
                                }]
                            }
                        };
                        var myChart = echarts.init(document.getElementById('echarts_div'));
                        myChart.clear();
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                },
                async : false,
                dataType : "json"
            });
        }
    </script>
</head>
<body style="height: 100%">
<%@ include file="/WEB-INF/views/common/top.jsp" %>
<div class="container-fluid" style="height: 100%">
    <%@ include file="/WEB-INF/views/common/left.jsp" %>

    <div class="col-sm-10 col-sm-offset-2 col-md-11 col-md-offset-1" style="height: 100%">
        <h2 class="page-header">${title}</h2>
        <form class="form-inline " action="nodeStatus" method="post">
            <div class="form-group">
                <label>统计类型:</label>
                <select id="sel_statType"  class="form-control input-sm" style='width: 100px;margin-right:10px'>
                    <option value="statError">错误率统计</option>
                    <option value="statPercent">百分位统计</option>
                    <option value="statDependency">服务依赖</option>
                    <option value="statSunburst">旭日图</option>
                </select>
                <label>平台名称:</label>
                <select id="sel_platformName" name="sel_platformName" class="form-control input-sm" onchange="changePlatform()" style='width: 80px;margin-right:10px'>
                    <c:forEach items="${platformList}" var="platform">
                        <option value="${platform.name}">${platform.describe}(${platform.name})</option>
                    </c:forEach>
                </select>
                <label>部署环境:</label>
                <select id="sel_env" name="sel_env" class="form-control input-sm" style='width: 80px;margin-right:10px'>
                    <option value="">全部</option>
                    <c:forEach items="${envList}" var="env">
                        <option value="${env}">${env}</option>
                    </c:forEach>
                </select>
                <label>客户端:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_clientNameList">
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_clientName' name='txt_clientName' value=''  style='width: 100px;margin-right:10px'>
                </div><!-- /input-group -->
                <label>模块:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_serviceCategoryList">
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_serviceCategory' name='txt_serviceCategory' value=''  style='width: 100px;margin-right:10px'>
                </div><!-- /input-group -->
                <label>服务:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style='height: 30px'><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="ul_serviceNameList">
                        </ul>
                    </div><!-- /btn-group -->
                    <input type='text' class='form-control input-sm' id='txt_serviceName' name='txt_serviceName' value=''  style='width: 100px;margin-right:10px'>
                </div><!-- /input-group -->
                <label>日期范围:</label>
                <div  class="form-inline input-group date form_date col-md-4" data-date="" data-date-format="yyyy-mm-dd" style='width: 180px;'>
                    <input class="form-control" id="fromDate" name="fromDate" type="text" value="">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                </div>
                <label>至</label>
                <div class="form-inline input-group date form_date col-md-4" data-date="" data-date-format="yyyy-mm-dd" style='width: 180px;margin-right:10px'>
                    <input class="form-control" id="toDate" name="toDate" type="text" value="">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                </div>
                <button type='button' class='btn btn-primary' onclick='stat()'>统 计</button>
            </div>

        </form>

        <div id="echarts_div" style="width: 100%;height:90%;"></div>

        <!-- 详细信息框（Modal） -->
        <div class="modal fade" id="basicInfoModal" tabindex="-1" role="dialog" aria-labelledby="basicInfoLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="basicInfoLabel">xxx</h4>
                    </div>
                    <div class="modal-body">
                        <div id="basicInfoDiv"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

    </div>
</body>
</html>
